@charset "utf-8";

$fontsize:40;

@function r($px){
    @return $px/$fontsize * 1rem;
}

//共用
@mixin nav1{
    width: r(704);
    height: r(115);
    margin: 0 auto;
    vertical-align: middle;
    display: block;
    .zt_left2{
        line-height: r(96);
        display: inline-block;
        .aa{
            width: r(37);
            height: r(35);
            float: left;
            img{
                width: 100%;
                height: 100%;
            }
        }
        span{
            margin-left: r(17);
            font-size: r(30);
            i{
                color: #FF9344;
            }
        }
    }
    .zt_right2{
        float: right;
        line-height: r(115);
        span{
            font-size: r(25); 
        }
        i{
            color: #FF9344;
        }
    }    
}
@mixin san{
    width: r(226);
    height: r(200);
    img{
        width: 100%;
        height: 100%;
    }
}
//html{font-size:$fontsize;}
html,body{
    width: 100%;
    height: 100%;
}
.web{
    width: 100%;
    height: 100%;
    position: relative;
    //头部
    header{
        width: 100%;
        height: r(131);
        position: absolute;
        top: 0;
        .header_left{
            width: r(125);
            height: r(57);
            border: 1px solid #FF9344;
            margin-top: r(48);
            margin-left: r(21);
            text-align: center;
            border-radius: 25px;
            line-height: r(57);
            font-size: r(20);
            float: left;
            vertical-align: middle;
            display: inline-block;
        }
        .header_middle{
            display:block;
            text-align: center;
            margin-top: r(64);
            font-size: r(25);
        }
        .selectBar{
            float: right;
            margin-right: r(21);
            margin-top: r(50);
            width: r(158);
            height: r(57);
            border: 1px solid #ff9344;
            background: url(../img/tuangou/icon.png) no-repeat right center;
            background-size: r(30) r(15);
            select{
                width: 100%;
                height: 100%;
                background: transparent;
                border: none;
                -webkit-appearance: none;
                vertical-align: top;
                padding-left: r(14);
                font-size: r(25);
            }
        }
    }
    //主体
    section{
        position: absolute;
        top: r(131);
        bottom: r(68);
        width: 100%;
        overflow-y: scroll;
        -webkit-overflow-scrolling: touch;
        .shousuo{
            width: r(704);
            height: r(120);
            margin: 0 auto;
            .searchBar{
                width: r(270);
                height: r(55);
                line-height: r(55);
                border: 1px solid #ff9344;
                border-radius: 25px;
                margin: r(34) auto;
                box-sizing: border-box;
                font-size: r(12);
                input{
                    width: r(220);
                    height: 100%;
                    border: none;
                    vertical-align: top;
                    font-size: r(23);
                    outline: none;
                    border-radius: 25px;
                    text-indent: r(10);
                }
                i{
                    float: right;
                    padding-right:r(10) ;
                    font-size: r(33);
                    color: #ff9344;
                }
            }
        }
        .section_sou{
            width: r(704);
            height: r(41);
            margin: 0 auto;
            text-align: center;
            vertical-align: top;
            span{
                display: inline-block;
                vertical-align: top;
                text-align: center;
                font-size: r(25);
            }
        }
        .section_ul{
            width: r(704);
            height: r(135);
            margin: 0 auto;
            table{
               
                margin: 0 auto;
                text-align: center;
                tr td{
                    border: r(5) solid white;
                    width: r(124);
                    height: r(64);
                    font-size: r(20);
                    color: #9b9b9b;
                    background: #dcdcdc;
                }
            }
            
        }
        .section_zt2{
            @include nav1;
        }
        .picture{
            width: r(704);
            height: r(351);
            margin: 0 auto;
            margin-top: r(10);
            .tu_left{
                width: r(281);
                height: 100%;
                float: left;
                img{
                    width: 100%;
                }
            }
            .tu_right{
                width: r(417);
                height: 100%;
                float: right;
                .tu_top{
                    width: 100%;
                    height: r(147);
                    margin-bottom: r(10);
                    img{
                        width: 100%;
                        height: 100%;
                    }
                }
                .tu_1{
                    width: r(195);
                    height: r(196);
                    float: left;
                    
                    img{
                        width: 100%;
                        height: 100%;
                    }
                }
                .tu_2{
                    float: right;
                    width: r(195);
                    height: r(196);
                    margin-right: r(10);
                    img{
                        width: 100%;
                        height: 100%;
                    }
                }
            }
        }
        .section_zt3{
            @include nav1;
        }
        .san{
            width: r(704);
            height: r(351);
            
            margin: 0 auto;
            ul li .san_1{
                @include san;
            }
            ul li .san_2{
                @include san;
            }
            ul li .san_3{
                @include san;
            }
            ul li{
                float: left;
            }
            ul li:nth-child(2){
                margin-left: r(13);
                margin-right: r(13);
            }
        }
    }
    
    footer{
        width: 100%;
        height: r(136);
        background: white;
        position: absolute;
        bottom: 0;
        a{
            color: #000000;
        }
        
        ul li{
            width: 25%;
            height: 100%;
            float: left;
            text-align: center;
            padding-top: 8px;
            box-sizing: border-box;
            i{
                color: #FF9344;
            }
            .iconfont{
                color: #FF9344;
                font-size: r(65);
                -webkit-text-stroke: 1px #FF9344;
                color: transparent;
                
            }
            &.active .iconfont{
                color: #FF9344;
            }
            p{
                font-size: r(26);
            }
            &:hover .iconfont{
                color: red;  
            }
        }
    }
}